<template>
  <div class="q-pb-lg" :id="'checkbox-' + field.name">
    <div v-if="!field.single">
      <div class="text-grey-7">{{field.label}}</div>
      <div>
        <q-option-group
          :options="options"
          type="checkbox"
          v-model="field.value"
          inline
          :size="field.size || 'xs'"
          :disable="field.readonly"
          :left-label="!!field.leftLabel"
          :color="field.color || 'primary'"
        />
      </div>
    </div>
    <div v-else style="background-color: #f2f2f2; padding: 8px 12px;">
      <q-checkbox
        v-model="field.value"
        :label="checkLabel"
        :left-label="!!field.leftLabel"
        :color="field.color || 'primary'"
        :disable="field.readonly"
        :true-value="trueValue"
        :false-value="falseValue"
        :checked-icon="field.checkedIcon"
        :unchecked-icon="field.uncheckedIcon"
        :indeterminate-icon="field.indeterminateIcon"
      />
    </div>
    <div class="text-bold text-white bg-yellow-10" style="padding: 1px;" v-if="canShowCompare">
      {{field.compare.label ? field.compare.label + '：' : ''}}{{field.compare.map ? field.compare.map.value : field.compare.value}}
    </div>
    <div class="hint" v-if="field.hint">{{field.hint}}</div>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'fieldCheckbox',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    const self = this;
    return {

    }
  },
  computed: {
    ...mapState(useStore, ['dictionary']),
    options () {
      if (this.field.dict) {
        return this.dictionary[this.field.dict];
      } else {
        return this.field.options || []
      }
    },
    canShowCompare () {
      /*
        compare的值
        compare: {
          label, // 标题
          value, // 对比的值
          always // true-有数据就显示 false-值不同，再显示
        } */
      return this.field.compare && this.field.compare.value !== null && (this.field.compare.always || this.field.compare.value != this.field.value);
    },
    trueValue () {
      return this.field.trueValue === undefined ? true : this.field.trueValue;
    },
    falseValue () {
      return this.field.falseValue === undefined ? false : this.field.falseValue
    },
    checkLabel () {
      return `${this.field.label || ''} ${this.trueLabel}${this.falseLabel}`;
    },
    trueLabel () {
      let label = '';
      if (this.field.value === this.trueValue && this.field.trueLabel) {
        label = this.field.trueLabel;
      }
      return label;
    },
    falseLabel () {
      let label = '';
      if (this.field.value === this.falseValue && this.field.falseLabel) {
        label = this.field.falseLabel;
      }
      return label;
    }
  }
});
</script>

<style scoped>
.hint {
  font-size: 12px;
  min-height: 20px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.54);
  padding: 8px 12px 0;
}
.compare {
  font-size: 12px;
  min-height: 20px;
  line-height: 1;
  padding: 8px 12px 0;
}
</style>
